import React, { memo, useEffect, useState } from "react";
import {
  Input,
  Layout,
  Typography,
  Dropdown,
  Menu,
  Button,
  MenuProps,
} from "antd";
import { GlobalOutlined } from "@ant-design/icons";
import logo from "@/logo.svg";
import { HeaderContainer } from "./style";
import { useSelector } from "@/store/hooks";
import { useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import {
  addLanguageActionCreator,
  changeLanguageActionCreator,
} from "@/store/language/actions";
import { UserSlice } from "@/store/user";
import { useNavigate } from "react-router-dom";
import jwt_decode, { JwtPayload } from "jwt-decode";
const { Title, Text } = Typography;
const { Search } = Input;
interface UserInfo extends JwtPayload {
  username: string;
}
const Header = memo(() => {
  const [userName, setUserName] = useState("");
  const { token, cartItems } = useSelector((state) => ({
    token: state.User.token,
    cartItems: state.ShoppingCart.items,
  }));
  const shoppingCartLoading = useSelector(
    (state) => state.ShoppingCart.loading,
  );
  useEffect(() => {
    if (token) {
      const userInfo = jwt_decode<UserInfo>(token);
      setUserName(userInfo.username);
    }
  }, [token]);

  const navigate = useNavigate();
  const { language } = useSelector((state) => ({
    language: state.language,
  }));
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const selectItem = (item) => {
    dispatch(changeLanguageActionCreator(item.key));
  };
  const logout = () => {
    dispatch(UserSlice.actions.logout());
    navigate("/");
  };
  return (
    <HeaderContainer>
      {/* <h1>{shoppingCartLoading ? "true" : "false"}</h1> */}
      <div className="top-header">
        <Title level={3} type="secondary">
          {t("header.slogan")}
        </Title>
        <Dropdown
          arrow={true}
          overlay={
            <Menu onClick={selectItem}>
              {language.languageList.map((i) => {
                return <Menu.Item key={i.code}>{i.label}</Menu.Item>;
              })}
              <Menu.Item key={"new"}> {t("header.add_new_language")}</Menu.Item>
            </Menu>
          }
        >
          <Button icon={<GlobalOutlined />} type="primary" shape="round">
            {language.language === "zh" ? "中文" : "English"}
          </Button>
        </Dropdown>

        {token ? (
          <div className="button-group">
            <Text>
              <span>
                {t("header.welcome")},{userName}
              </span>
            </Text>

            <Button
              type="primary"
              shape="round"
              loading={shoppingCartLoading}
              onClick={(e) => {
                navigate("/home/shoppingcart");
              }}
            >
              {t("header.shoppingCart")}({cartItems.length})
            </Button>
            <Button shape="round" onClick={logout}>
              {t("header.signOut")}
            </Button>
          </div>
        ) : (
          // 未登录
          <div className="button-group">
            <Button
              type="primary"
              shape="round"
              onClick={(e) => {
                navigate("/register");
              }}
            >
              {t("header.register")}
            </Button>
            <Button
              shape="round"
              onClick={(e) => {
                navigate("/login");
              }}
            >
              {t("header.signin")}
            </Button>
          </div>
        )}
      </div>
      <Layout.Header className="main-header">
        <img src={logo} alt="" className="App-logo" />
        <Title
          style={{ cursor: "pointer" }}
          level={2}
          onClick={(e) => {
            navigate("/");
          }}
        >
          React 旅游网
        </Title>
        <Search
          placeholder="请输入旅游目的地、主题、关键字"
          onSearch={(keywords) => {
            navigate("/home/search/" + keywords);
          }}
        ></Search>
      </Layout.Header>
      <Menu mode="horizontal" className="menu-nav-show">
        <Menu.Item key="1"> {t("header.home_page")} </Menu.Item>
        <Menu.Item key="2"> {t("header.weekend")} </Menu.Item>
        <Menu.Item key="3"> {t("header.group")} </Menu.Item>
        <Menu.Item key="4"> {t("header.backpack")} </Menu.Item>
        <Menu.Item key="5"> {t("header.private")} </Menu.Item>
        <Menu.Item key="6"> {t("header.cruise")} </Menu.Item>
        <Menu.Item key="7"> {t("header.hotel")} </Menu.Item>
        <Menu.Item key="8"> {t("header.local")} </Menu.Item>
        <Menu.Item key="9"> {t("header.theme")} </Menu.Item>
        <Menu.Item key="10"> {t("header.custom")} </Menu.Item>
        <Menu.Item key="11"> {t("header.study")} </Menu.Item>
        <Menu.Item key="12"> {t("header.visa")} </Menu.Item>
        <Menu.Item key="13"> {t("header.enterprise")} </Menu.Item>
        <Menu.Item key="14"> {t("header.high_end")} </Menu.Item>
        <Menu.Item key="15"> {t("header.outdoor")} </Menu.Item>
        <Menu.Item key="16"> {t("header.insurance")} </Menu.Item>
      </Menu>
    </HeaderContainer>
  );
});

export default Header;
